{% extends "pos/base.html" %}
{% load static %}
{% block title %}{{ purchase_id|yesno:"Edit Purchase,New Purchase" }}{% endblock %}

{% block stylesheets %}
 
<style>
  /* Hide backend-only columns if needed */
  /*.col-gst, .col-ftax, .col-bonus, .col-batch, .col-expiry { display: none; }*/
  .col-gst, .col-ftax, .col-batch, .col-expiry { display: none; }
  /* Widen Name column */
  th.name-header, td.name-cell { width: 30%; }
  /* Compact inputs */
  #table_products input, #table_products select {
    width:100%; box-sizing:border-box; font-size:.85rem; padding:2px;
  }
  #table_products th, #table_products td {
    vertical-align:middle; font-size:.85rem;
  }
  .delete-row { font-size:1rem; line-height:1; }
  .fixed-footer { padding:6px; }
  /* Product Info Bar */
  #product-info-bar {
    background: linear-gradient(135deg, #f8f9fb 0%, #eef1f5 100%) !important;
    border: 1px solid #d0d7de !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    font-size: .82rem;
    transition: opacity .2s;
  }
  #product-info-bar .pib-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 2px 10px;
    white-space: nowrap;
  }
  #product-info-bar .pib-chip b {
    color: #495057;
    font-weight: 600;
  }
  #product-info-bar .pib-chip .pib-val {
    color: #0d6efd;
    font-weight: 700;
  }
  #product-info-bar .pib-chip.pib-stock .pib-val { color: #198754; }
  #product-info-bar .pib-chip.pib-last  .pib-val { color: #dc3545; }
  #product-info-bar .pib-divider {
    width: 1px;
    height: 20px;
    background: #ced4da;
    margin: 0 4px;
  }
  /* Highlight the "Total" column in blue and bold */
  #table_products tbody td.total-cell {
  background-color:#cfe2ff;
  font-weight:600;
  color:#084298;
  font-size:.99rem;
  }

  /* force the input-group children to stay on one line */
  .input-group {
    flex-wrap: nowrap;
  }

  /* override select2's default full‐width so it flexibly fills the remaining space */
  .select2-container {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0; /* allow it to shrink if needed */
  }

  /* make the select2 "box" match Bootstrap's form-control height */
  .select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
  }

  /* Scope: only inside this bar */
  .one-line-compact .compact-control {
    padding: .22rem .4rem;           /* tighter */
    line-height: 1.2;                 /* tighter */
    border-radius: .2rem;             /* subtle */
  }
  .one-line-compact .input-group.compact-group > .btn {
    padding: .22rem .5rem;            /* tighter button */
    border-radius: .2rem;
  }
  /* Select2: match compact height */
  .one-line-compact .select2-container .select2-selection--single {
    height: calc(1.2em + .44rem + 2px);
    padding: .12rem .35rem;
    line-height: 1.2;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: .2rem;
  }
  .one-line-compact .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.2;
    padding-left: 0;
    font-size: .875rem;
  }
  .one-line-compact .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
  }

  /* ── Currency Selector ──────────────────────────────────────────────── */
  #currency-btn {
    font-size: .8rem;
    padding: .22rem .55rem;
    border-radius: .2rem;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
  }
  #currency-rate-input {
    width: 90px;
    font-size: .82rem;
    padding: .22rem .4rem;
    border-radius: .2rem;
    text-align: center;
    font-weight: 600;
  }
  #curr-base-hint {
    font-size: .78rem;
    color: #6c757d;
    margin-left: 8px;
    white-space: nowrap;
  }
  .curr-dropdown-item .curr-d-code   { font-weight:700; font-size:.9rem; }
  .curr-dropdown-item .curr-d-name   { font-size:.78rem; color:#6c757d; }
  .curr-dropdown-item .curr-d-rate   { font-size:.75rem; color:#198754; font-weight:600; }
  .curr-dropdown-item.is-base-item .curr-d-code { color:#0d6efd; }

  /* ══════════════════════════════════════════════════════════════════════
     HIGH-CONTRAST READABILITY — sab text pure black & clear
     (halka/madham text hata diya, taa-ke parhne mein masla na ho)
     ══════════════════════════════════════════════════════════════════════ */
  .purchaseForm, .purchaseForm label,
  #table_products, #table_products th, #table_products td,
  .fixed-footer, .fixed-footer * {
    color: #000 !important;
  }
  .purchaseForm label,
  .row.one-line-compact label,
  .row label {
    font-weight: 700 !important;
    color: #000 !important;
  }
  /* Inputs & selects: solid black bold text (borders default — koi change nahi) */
  .purchaseForm input.form-control,
  .purchaseForm select.form-select,
  .purchaseForm .form-control-sm,
  #table_products input,
  #table_products select {
    color: #000 !important;
    font-weight: 600 !important;
  }
  .purchaseForm input::placeholder { color: #495057 !important; opacity: 1; }
  /* Readonly totals (sub total, grand) bilkul saaf */
  #sub_total, #grand_total, #paid_amount, #balance_due {
    color: #000 !important;
    font-weight: 800 !important;
    background: #fff !important;
  }
  /* Table headers darker */
  #table_products thead th {
    color: #000 !important;
    font-weight: 800 !important;
  }
  /* Total column already blue — keep dark & bold */
  #table_products tbody td.total-cell {
    color: #002b6b !important;
    font-weight: 800 !important;
  }
  /* Select2 selected text dark */
  .select2-container--default .select2-selection--single .select2-selection__rendered,
  .select2-selection__rendered {
    color: #000 !important;
    font-weight: 600 !important;
  }

  /* ── Payment box ─────────────────────────────────────────────────────── */
  #payment-box {
    background: #f4f8ff;
    border: 1px solid #cfe0ff;
    border-radius: 6px;
    padding: 8px 10px;
  }
  #payment-box label { color:#000 !important; font-weight:700 !important; }
  #balance_due.is-clear { color:#198754 !important; }   /* fully paid */
  #balance_due.is-due   { color:#c81e1e !important; }   /* amount still due */
</style>

{% endblock %}

{% block content %}
<form method="post" class="purchaseForm"
      action="{% if purchase_id %}{% url 'purchases:purchase_edit' purchase_id %}{% else %}{% url 'purchases:purchase_add' %}{% endif %}">
  {% csrf_token %}

<!-- HEADER FIELDS -->
  <!-- COMPACT ONE-LINE BAR (labels removed, placeholders used) -->
  <div class="row g-1 align-items-center mb-1 one-line-compact">

    <!-- Bill Type -->
    <div class="col-12 col-md-auto">
      <select id="ui_bill_type" class="form-select form-select-sm compact-control" data-placeholder="Bill Type">
        <option value="" selected disabled>Bill Type…</option>
        <option value="vendor_purchase">Vendor Purchase</option>
        <option value="vendor_return">Vendor Return</option>
        <option value="customer_purchase">Customer Purchase</option>
        <option value="customer_return">Customer Return</option>
      </select>
    </div>

    <!-- Party (Select2 + Add) -->
    <div class="col-12 col-md-5 col-lg-4">
      <div class="input-group input-group-sm compact-group">
        <select id="vendor_select" name="vendor" class="form-select select2 compact-control" data-placeholder="Party">
          <option value=""></option>
          <!-- …options… -->
        </select>
        <a href="{% url 'products:vendors_add' %}" target="_blank"
           class="btn btn-outline-primary btn-sm compact-btn d-inline-flex align-items-center justify-content-center"
           title="Add">
          <i class="fas fa-plus"></i>
        </a>

        <a href="{% url 'pos:config_list' %}?type=purchase" target="_blank"
           class="btn btn-sm btn-outline-secondary mr-2 d-inline-flex align-items-center justify-content-center"
           title="Settings">
          <i class="fas fa-cog"></i>
        </a>

        <a href="#"
           class="btn btn-sm btn-outline-secondary mr-2 d-inline-flex align-items-center justify-content-center"
           title="Youtube">
          <i class="fab fa-youtube text-danger fa-lg"></i>
        </a>

      </div>
    </div>

    <!-- Date -->
    <div class="col-6 col-md-auto">
      <input type="date" id="purchase_date" name="date"
             class="form-control form-control-sm compact-control" value="{{ today }}" placeholder="Date">
    </div>

    <!-- Challan # -->
    <div class="col-6 col-md-auto">
      <input type="text" id="challan" name="challan"
             class="form-control form-control-sm compact-control" placeholder="Challan #">
    </div>

    <!-- Remarks (flex fill) -->
    <div class="col-12 col-md col-lg">
      <input type="text" id="remarks" name="remarks"
             class="form-control form-control-sm compact-control" placeholder="Remarks">
    </div>

    <!-- ══════════════════════════════════════════════════════════
         CURRENCY SELECTOR — top-right of compact bar
         Only shown when 1+ currencies are configured
         ══════════════════════════════════════════════════════════ -->
    <div class="col-12 col-md-auto ms-auto d-flex align-items-center gap-1"
         id="currency-selector-wrap">

      <!-- Currency Dropdown button -->
      <div class="dropdown">
        <button class="btn btn-sm btn-outline-success dropdown-toggle"
                type="button"
                id="currency-btn"
                data-toggle="dropdown" 
                aria-expanded="false"
                title="Select Invoice Currency">
          <span id="curr-symbol">—</span>
          <span id="curr-code" class="ms-1">Loading…</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-end shadow-sm" id="currencyDropdownMenu"
            style="min-width:210px; font-size:.85rem;">
          <li><span class="dropdown-item-text text-muted small">Loading currencies…</span></li>
        </ul>
      </div>

      <!-- Rate input — only visible when non-base currency is active -->
      <div id="currency-rate-wrap" style="display:none;">
        <input type="number"
               step="0.000001"
               min="0.000001"
               id="currency-rate-input"
               class="form-control form-control-sm"
               placeholder="Rate"
               title="Exchange Rate (1 foreign = ? base)">
      </div>

    </div>
    <!-- END CURRENCY SELECTOR -->


  </div>

  <!-- Hidden fields for currency — submitted with form -->
  <input type="hidden" name="currency_id"   id="currency_id_hidden"   value="">
  <input type="hidden" name="currency_rate" id="currency_rate_hidden" value="1">


  <!-- PRODUCT INFO BAR -->
  <div id="product-info-bar" class="d-flex align-items-center justify-content-between px-3 py-1 mb-2" style="min-height:34px; display:none !important;">
    <!-- Left: product-specific info -->
    <div class="d-flex align-items-center gap-1 flex-wrap">
      <span class="pib-chip pib-stock">
        <b><i class="fas fa-boxes fa-sm me-1 text-muted"></i>Stock:</b>
        <span class="pib-val" id="pib-stock">—</span>
      </span>
      <span class="pib-chip">
        <b><i class="fas fa-layer-group fa-sm me-1 text-muted"></i>PPP:</b>
        <span class="pib-val" id="pib-ppp">—</span>
      </span>
      <span class="pib-chip pib-last">
        <b><i class="fas fa-tag fa-sm me-1 text-muted"></i>Last Pur:</b>
        <span class="pib-val" id="pib-last-purchase">—</span>
      </span>

      <div class="pib-divider"></div>

      <!-- Bill-level totals -->
      <span class="pib-chip">
        <b><i class="fas fa-cubes fa-sm me-1 text-muted"></i>Items:</b>
        <span class="pib-val" id="pib-total-items">0</span>
      </span>
      <span class="pib-chip">
        <b><i class="fas fa-hashtag fa-sm me-1 text-muted"></i>Total Qty:</b>
        <span class="pib-val" id="pib-total-qty">0</span>
      </span>
    </div>

    <!-- Right: Purchase Report link -->
    <a href="{% url 'purchases:purchases_list' %}" target="_blank"
       class="btn btn-sm btn-outline-primary py-0 px-2 ms-2" style="white-space:nowrap;">
      <i class="fas fa-file-alt me-1"></i>Purchase Report
    </a>
  </div>

  <!-- PRODUCTS TABLE -->
  <div class="table-responsive mb-3">
    <table class="table table-sm table-bordered" id="table_products">
      <thead>
        <tr>
          <th>Action</th><th class="sno">S/No</th><th class="col-code">Code</th>
          <th class="name-header">Name</th><th class="col-speca">Specs</th><th>Qty</th>
          <th class="col-purchase-header">Purchase</th>
          <th class="col-margin">Margin</th>
          <th class="col-retail">Retail</th>
          <th class="col-gst">Gst</th><th class="col-ftax">F-Tax</th>
          <th class="col-discamt">Disc Amt</th><th class="col-discpct">Disc %</th><th class="col-bonus">Bonus</th>
          <th class="col-batch">Batch</th><th class="col-expiry">Expiry</th><th>Total</th><th class="col-extras">Extras</th>
        </tr>
      </thead>
      <tbody>
        <!-- hidden template row -->
        <tr class="template-row d-none">
          <td><button type="button" class="btn btn-sm btn-danger delete-row">×</button></td>
          <td class="sno"></td>
          <td class="col-code"><input type="text" class="code-input form-control form-control-sm"></td>
          <td class="name-cell">
            <select class="name-select form-control form-control-sm">
              <option value=""></option>
            </select>
          </td>
          <td class="col-speca">
            <select class="speca-select form-control form-control-sm">
              <option value="" selected>Default Variant</option>
            </select>
          </td>

          <td><input type="number" step="any" class="qty-input form-control form-control-sm"></td>
          <td><input type="number" step="any" class="purchase-input form-control form-control-sm"></td>
          <td class="col-margin"><input type="number" step="any" class="margin-input form-control form-control-sm" placeholder="0"></td>
          <td class="col-retail"><input type="number" step="any" class="retail-input form-control form-control-sm"></td>
          <td class="col-gst"><input type="number" step="any" class="gst-input form-control form-control-sm"></td>
          <td class="col-ftax"><input type="number" step="any" class="ftax-input form-control form-control-sm"></td>
          <td class="col-discamt"><input type="number" step="any" class="discamt-input form-control form-control-sm"></td>
          <td class="col-discpct"><input type="number" step="any" class="discpct-input form-control form-control-sm"></td>
          <td class="col-bonus"><input type="number" step="any" class="bonus-input form-control form-control-sm"></td>
          <td class="col-batch"><input type="text" class="batch-input form-control form-control-sm"></td>
          <td class="col-expiry"><input type="date" class="expiry-input form-control form-control-sm"></td>
          <td class="total-cell text-end">0.00</td>
          <td class="extras-cell col-extras">
            <div class="btn-group btn-group-sm" role="group">
              <button type="button" class="btn btn-outline-secondary btn-add-serials" title="Add Serials">
                <i class="fas fa-barcode"></i>
              </button>
            </div>
            <input type="hidden" class="serials-json" value="[]">
            <input type="hidden" class="is-serial-tracked" value="0">
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- FOOTER CALCULATIONS -->
<!-- ─── First row: adjustments ─── -->
<div class="row mb-2 g-2 align-items-end">
  <div class="col-md-2">
    <label>Sub Total</label>
    <input readonly id="sub_total" class="form-control form-control-sm">
  </div>
  <div class="col-md-1">
    <label>Disc %</label>
    <input id="flat_disc_pct" class="form-control form-control-sm" type="number" step="any">
  </div>
  <div class="col-md-1">
    <label>Disc Amt</label>
    <input id="flat_disc_amount" class="form-control form-control-sm" type="number" step="any">
  </div>
  <div class="col-md-2">
    <label>Other Expenses</label>
    <input id="other_charges" class="form-control form-control-sm">
  </div>
  <div class="col-md-2">
    <label>Builty Expenses</label>
    <input id="builty_expenses" class="form-control form-control-sm">
  </div>
  <div class="col-md-2">
    <label>Flat GST (%)</label>
    <input id="flat_gst" class="form-control form-control-sm">
  </div>
  <div class="col-md-2">
    <label>F-Tax (%)</label>
    <input id="f_tax" class="form-control form-control-sm">
  </div>
</div>

<!-- ─── Payment row: only for purchase bills (we pay vendor/customer) ─── -->
<div id="payment-box" class="row mb-2 g-2 align-items-end">
  <div class="col-md-3">
    <label>Paid Amount</label>
    <input id="paid_amount" class="form-control form-control-sm" type="number" step="any" min="0" placeholder="0.00">
  </div>
  <div class="col-md-4">
    <select id="bank_select" class="form-select form-select-sm">
      <option value="0">Cash (no bank)</option>
      {% for b in banks %}
        <option value="{{ b.t_id }}">{{ b.name }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="col-md-3">
    <label>Balance Due</label>
    <input readonly id="balance_due" class="form-control form-control-sm" value="0.00">
  </div>
  <div class="col-md-2 d-flex gap-1">
    <button type="button" id="btnPayFull" class="btn btn-outline-success btn-sm w-100" title="Pay full grand total">
      <i class="fas fa-coins me-1"></i>Full
    </button>
  </div>
</div>

  <input type="hidden" name="purchase_items" id="purchase_items">
</form>

<nav class="navbar fixed-bottom bg-white border-top fixed-footer">
  <div class="container-fluid d-flex justify-content-between align-items-center">
    <h5 class="m-0">
      Grand:&nbsp;<input readonly class="m-0" id="grand_total">
      <span id="curr-base-hint"></span>
    </h5>
    <button id="btnSave" class="btn btn-primary">Save Purchase</button>
  </div>
</nav>

<!-- Serials Modal -->
<div class="modal fade" id="serialsModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title">Attach Serials</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-2">
        <div class="d-flex justify-content-between small mb-2">
          <div>Required: <span id="sm-required">0</span></div>
          <div>Entered: <span id="sm-entered">0</span></div>
          <div>Remaining: <span id="sm-remaining">0</span></div>
        </div>
        <div class="table-responsive">
          <table class="table table-sm table-bordered mb-2" id="sm-table">
            <thead><tr><th>#</th><th>Barcode / Serial</th><th>Action</th></tr></thead>
            <tbody></tbody>
          </table>
        </div>
        <button class="btn btn-outline-primary btn-sm" id="sm-add-row">Add Row</button>
      </div>
      <div class="modal-footer py-2">
        <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary btn-sm" id="sm-save" disabled>Attach Serials</button>
      </div>
    </div>
  </div>
</div>

<!-- Quick Product Create Modal -->
<div class="modal fade" id="quickProductModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius:12px;overflow:hidden;">

      <!-- ── Gradient Header ── -->
      <div class="modal-header py-3 px-4 border-0"
           style="background:linear-gradient(135deg,#0d6efd 0%,#0a4fc4 100%);">
        <div class="d-flex align-items-center gap-2">
          <div style="background:rgba(255,255,255,.18);border-radius:8px;padding:7px 10px;">
            <i class="fas fa-box-open text-white fa-lg"></i>
          </div>
          <div>
            <h6 class="modal-title text-white mb-0 fw-bold" style="font-size:.95rem;">
              Create New Product
            </h6>
            <small class="text-white-50" style="font-size:.72rem;letter-spacing:.3px;">
              Fill in the details and save to continue
            </small>
          </div>
        </div>
        <button type="button" class="btn-close btn-close-white ms-auto"
                data-bs-dismiss="modal"></button>
      </div>

      <!-- ── Body ── -->
      <div class="modal-body p-4" style="background:#f6f8fc;">
        <form id="quickProductForm" autocomplete="off">

          <!-- Section: Identity -->
          <div class="mb-3">
            <div class="d-flex align-items-center gap-2 mb-2">
              <span style="width:3px;height:15px;background:#0d6efd;border-radius:3px;
                           display:inline-block;"></span>
              <span class="fw-semibold text-muted"
                    style="font-size:.73rem;text-transform:uppercase;letter-spacing:.7px;">
                Product Identity
              </span>
            </div>
            <div class="row g-2">
              <div class="col-md-4">
                <label class="form-label small fw-semibold mb-1 text-secondary">
                  <i class="fas fa-barcode me-1 text-primary"></i>Code
                </label>
                <input type="text" id="qp_code"
                       class="form-control form-control-sm"
                       placeholder="e.g. a-1042">
              </div>
              <div class="col-md-8">
                <label class="form-label small fw-semibold mb-1 text-secondary">
                  <i class="fas fa-tag me-1 text-primary"></i>Name
                  <span class="text-danger">*</span>
                </label>
                <input type="text" id="qp_name"
                       class="form-control form-control-sm"
                       placeholder="Product Name">
              </div>
              <div class="col-md-6">
                <label class="form-label small fw-semibold mb-1 text-secondary">
                  <i class="fas fa-building me-1 text-primary"></i>Company
                </label>
                <select id="qp_company" class="form-select form-select-sm">
                  <option value="">Select…</option>
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label small fw-semibold mb-1 text-secondary">
                  <i class="fas fa-layer-group me-1 text-primary"></i>Category
                </label>
                <select id="qp_category" class="form-select form-select-sm">
                  <option value="">Select…</option>
                </select>
              </div>
            </div>
          </div>

          <hr class="my-3" style="border-color:#dde2ea;opacity:.6;">

          <!-- Section: Pricing -->
          <div class="mb-1">
            <div class="d-flex align-items-center gap-2 mb-2">
              <span style="width:3px;height:15px;background:#198754;border-radius:3px;
                           display:inline-block;"></span>
              <span class="fw-semibold text-muted"
                    style="font-size:.73rem;text-transform:uppercase;letter-spacing:.7px;">
                Pricing &amp; Pack
              </span>
            </div>
            <div class="row g-2">
              <div class="col-md-3">
                <label class="form-label small fw-semibold mb-1 text-secondary">
                  <i class="fas fa-shopping-cart me-1 text-success"></i>Purchase
                </label>
                <div class="input-group input-group-sm">
                  <span class="input-group-text px-2"
                        style="background:#d1e7dd;color:#0f5132;border-color:#a3cfbb;
                               font-size:.75rem;font-weight:700;">Rs</span>
                  <input type="number" step="any" id="qp_purchase"
                         class="form-control form-control-sm" placeholder="0.00">
                </div>
              </div>
              <div class="col-md-3">
                <label class="form-label small fw-semibold mb-1 text-secondary">
                  <i class="fas fa-store me-1 text-info"></i>Retail
                </label>
                <div class="input-group input-group-sm">
                  <span class="input-group-text px-2"
                        style="background:#cff4fc;color:#055160;border-color:#9eeaf9;
                               font-size:.75rem;font-weight:700;">Rs</span>
                  <input type="number" step="any" id="qp_retail"
                         class="form-control form-control-sm" placeholder="0.00">
                </div>
              </div>
              <div class="col-md-3">
                <label class="form-label small fw-semibold mb-1 text-secondary">
                  <i class="fas fa-tags me-1 text-warning"></i>Wholesale
                </label>
                <div class="input-group input-group-sm">
                  <span class="input-group-text px-2"
                        style="background:#fff3cd;color:#664d03;border-color:#ffe69c;
                               font-size:.75rem;font-weight:700;">Rs</span>
                  <input type="number" step="any" id="qp_wholesale"
                         class="form-control form-control-sm" placeholder="0.00">
                </div>
              </div>
              <div class="col-md-3">
                <label class="form-label small fw-semibold mb-1 text-secondary">
                  <i class="fas fa-cubes me-1 text-secondary"></i>Pcs/Pack
                </label>
                <input type="number" step="1" id="qp_ppp"
                       class="form-control form-control-sm" value="1" placeholder="1">
              </div>
            </div>
          </div>

        </form>
      </div>

      <!-- ── Footer ── -->
      <div class="modal-footer px-4 py-3 border-0"
           style="background:#eef1f7;">
        <button class="btn btn-sm btn-light border px-4" data-bs-dismiss="modal">
          <i class="fas fa-times me-1"></i>Cancel
        </button>
        <button class="btn btn-sm btn-primary px-4 fw-semibold" id="qp_save"
                style="letter-spacing:.2px;">
          <i class="fas fa-check-circle me-1"></i>Save Product
        </button>
      </div>

    </div>
  </div>
</div>


<!-- Purchase History Modal -->
<div class="modal fade" id="purchaseHistoryModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content border-0 shadow-lg" style="border-radius:12px;overflow:hidden;">

      <!-- Header -->
      <div class="modal-header py-3 px-4 border-0"
           style="background:linear-gradient(135deg,#198754 0%,#0d6b3f 100%);">
        <div class="d-flex align-items-center gap-2">
          <div style="background:rgba(255,255,255,.18);border-radius:8px;padding:7px 10px;">
            <i class="fas fa-history text-white fa-lg"></i>
          </div>
          <div>
            <h6 class="modal-title text-white mb-0 fw-bold" style="font-size:.95rem;">
              Purchase History
              <span id="ph-product-label" class="ms-2 fw-normal opacity-75" style="font-size:.82rem;"></span>
            </h6>
            <small class="text-white-50" style="font-size:.72rem;">Alt+H to open for focused row</small>
          </div>
        </div>
        <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="modal"></button>
      </div>

      <!-- Filter Bar -->
      <div class="px-4 py-2 border-bottom d-flex align-items-center gap-2 flex-wrap"
           style="background:#f0faf4;">
        <label class="small fw-semibold text-secondary mb-0">From:</label>
        <input type="date" id="ph-date-from"
               class="form-control form-control-sm"
               style="width:140px;">
        <label class="small fw-semibold text-secondary mb-0">To:</label>
        <input type="date" id="ph-date-to"
               class="form-control form-control-sm"
               style="width:140px;">
        <button class="btn btn-sm btn-success px-3" id="ph-search-btn">
          <i class="fas fa-search me-1"></i>Search
        </button>
        <span id="ph-loading" class="text-muted small ms-2" style="display:none;">
          <i class="fas fa-spinner fa-spin me-1"></i>Loading…
        </span>
        <span class="ms-auto small text-muted">
          Rows: <b id="ph-row-count">0</b>
        </span>
      </div>

      <!-- Table -->
      <div class="modal-body p-0">
        <div class="table-responsive">
          <table class="table table-sm table-hover mb-0" id="ph-table"
                 style="font-size:.82rem;">
            <thead style="background:#e9f5ee;position:sticky;top:0;z-index:1;">
              <tr>
                <th class="px-3">#</th>
                <th>Date</th>
                <th>Bill #</th>
                <th>Vendor</th>
                <th class="text-end">Qty</th>
                <th class="text-end">Bonus</th>
                <th class="text-end">Price</th>
                <th class="text-end">Disc</th>
                <th class="text-end">Total</th>
              </tr>
            </thead>
            <tbody id="ph-tbody">
              <tr>
                <td colspan="9" class="text-center text-muted py-4">
                  <i class="fas fa-inbox fa-2x d-block mb-2 opacity-25"></i>
                  No data loaded
                </td>
              </tr>
            </tbody>
            <!-- Summary Footer -->
            <tfoot id="ph-tfoot" style="display:none;background:#d1e7dd;font-weight:700;">
              <tr>
                <td colspan="4" class="px-3 text-end">Totals:</td>
                <td class="text-end" id="ph-sum-qty">—</td>
                <td class="text-end" id="ph-sum-bonus">—</td>
                <td></td>
                <td></td>
                <td class="text-end" id="ph-sum-total">—</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>

      <!-- Footer -->
      <div class="modal-footer py-2 px-4 border-0" style="background:#f0faf4;">
        <small class="text-muted me-auto">
          <i class="fas fa-keyboard me-1"></i>Press <kbd>Alt+H</kbd> on any row to view its history
        </small>
        <button class="btn btn-sm btn-secondary px-4" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

{% endblock %}

{% block javascripts %}

{{ settings_dict|json_script:"purchase_flags" }}

<script>
  $(function(){
    // Flags from context (setting_dict)
    const PURCHASE_FLAGS = JSON.parse(document.getElementById('purchase_flags')?.textContent || '{}');
    const PPP_MODE = !!(PURCHASE_FLAGS && PURCHASE_FLAGS.enable_ppp_qty_input);
    const QP_META_URL  = '{% url "purchases:quick_product_meta" %}';
    const QP_SAVE_URL  = '{% url "purchases:quick_create_product" %}';

    // ══════════════════════════════════════════════════════════════════════
    // CURRENCY SYSTEM
    // ══════════════════════════════════════════════════════════════════════

    const CURRENCY_AJAX_URL = '{% url "pos:ajax_currencies" %}';

    // Active currency state  (default: no currency loaded yet)
    let CURR = {
      id:      '',
      code:    '—',
      symbol:  '—',
      rate:    1.0,
      is_base: true,
    };

    // All available currencies (loaded once via AJAX)
    let ALL_CURRENCIES = [];

    // Build dropdown items from loaded currencies
    function buildCurrencyDropdown(currencies){
      const $menu = $('#currencyDropdownMenu').empty();
      if (!currencies.length){
        $menu.append('<li><span class="dropdown-item-text text-muted small">No currencies configured. <a href="{% url "pos:currency_list" %}">Add one</a></span></li>');
        return;
      }
      currencies.forEach(c => {
        const baseTag = c.is_base ? ' <span class="badge bg-primary" style="font-size:.65rem">BASE</span>' : '';
        const rateTag = c.is_base ? '' : `<span class="curr-d-rate">1 ${c.code} = ${parseFloat(c.rate).toFixed(4)} base</span>`;
        const $li = $(`
          <li>
            <a class="dropdown-item curr-dropdown-item ${c.is_base ? 'is-base-item' : ''}" href="#"
               data-currency-id="${c.id}"
               data-currency-code="${c.code}"
               data-currency-symbol="${c.symbol || c.code}"
               data-currency-rate="${c.rate}"
               data-is-base="${c.is_base}">
              <div class="d-flex align-items-center gap-2">
                <span style="font-size:1.1rem; min-width:22px; text-align:center;">${c.symbol || c.code}</span>
                <div>
                  <div class="curr-d-code">${c.code} ${baseTag}</div>
                  <div class="curr-d-name">${c.name}</div>
                  ${rateTag}
                </div>
              </div>
            </a>
          </li>
        `);
        $menu.append($li);
      });
    }

    // Apply selected currency to state + UI
    function applyCurrency(c){
      CURR = {
        id:      c.id,
        code:    c.code,
        symbol:  c.symbol,
        rate:    parseFloat(c.rate) || 1.0,
        is_base: c.is_base === true || c.is_base === 'true',
      };

      // Update button
      $('#curr-symbol').text(CURR.symbol);
      $('#curr-code').text(CURR.code);

      // Show/hide rate input
      if (CURR.is_base){
        $('#currency-rate-wrap').hide();
        $('#currency-rate-input').val('');
      } else {
        $('#currency-rate-wrap').show();
        $('#currency-rate-input').val(CURR.rate);
      }

      // Save to hidden fields
      $('#currency_id_hidden').val(CURR.id);
      $('#currency_rate_hidden').val(CURR.rate);

      // Update "Purchase" column header with currency code
      $('#table_products thead th.col-purchase-header').text(`Purchase (${CURR.code})`);

      // Convert all existing row prices from base → display currency
      $('#table_products tbody tr:not(.template-row)').each(function(){
        const $r = $(this);
        const basePurch  = parseFloat($r.data('base-purchase') || 0);
        const baseRetail = parseFloat($r.data('base-retail') || 0);
        if (basePurch)  $r.find('.purchase-input').val((basePurch / CURR.rate).toFixed(4));
        if (baseRetail) $r.find('.retail-input').val((baseRetail / CURR.rate).toFixed(4));
        recalcRow($r);
      });

      recalcAll();
    }

    // Load currencies via AJAX, then auto-select base
    function loadCurrencies(cb){
      $.get(CURRENCY_AJAX_URL, function(resp){
        ALL_CURRENCIES = resp.currencies || [];
        buildCurrencyDropdown(ALL_CURRENCIES);

        if (!ALL_CURRENCIES.length){
          // No currencies configured → hide selector
          $('#currency-selector-wrap').hide();
          CURR = { id:'', code:'', symbol:'', rate:1.0, is_base:true };
          if (typeof cb === 'function') cb();
          return;
        }

        // Show selector only if more than one currency
        if (ALL_CURRENCIES.length > 1){
          $('#currency-selector-wrap').show();
        } else {
          $('#currency-selector-wrap').hide();
        }

        // Default: select base currency
        const base = ALL_CURRENCIES.find(c => c.is_base) || ALL_CURRENCIES[0];
        applyCurrency(base);
        if (typeof cb === 'function') cb();
      }).fail(function(){
        $('#currency-selector-wrap').hide();
        if (typeof cb === 'function') cb();
      });
    }

    // Dropdown item click
    $(document).on('click', '#currencyDropdownMenu .curr-dropdown-item', function(e){
      e.preventDefault();
      const $el = $(this);
      applyCurrency({
        id:      $el.data('currency-id'),
        code:    $el.data('currency-code'),
        symbol:  $el.data('currency-symbol'),
        rate:    parseFloat($el.data('currency-rate')) || 1.0,
        is_base: $el.data('is-base'),
      });
    });

    // Manual rate change
    $('#currency-rate-input').on('input change', function(){
      const newRate = parseFloat($(this).val()) || 1;
      CURR.rate = newRate;
      $('#currency_rate_hidden').val(newRate);
      // Re-convert rows
      $('#table_products tbody tr:not(.template-row)').each(function(){
        recalcRow($(this));
      });
      recalcAll();
    });

    // ══════════════════════════════════════════════════════════════════════
    // END CURRENCY SYSTEM
    // ══════════════════════════════════════════════════════════════════════



    /**
     * Parse display qty string → backend float
     * "1.6"  ppp=12  → 1 + 6/12  = 1.5
     * "2.12" ppp=12  → 2 + 12/12 = 3.0
     * "0.6"  ppp=12  → 0 + 6/12  = 0.5
     */
    function parseDisplayQty(valStr, ppp) {
      const PPP = parseInt(ppp) || 1;
      if (!PPP_MODE || PPP <= 1) return parseFloat(valStr) || 0;

      const str = String(valStr || '').trim();
      if (!str || isNaN(parseFloat(str))) return 0;
      if (!str.includes('.')) return parseInt(str) || 0;

      const dotIdx = str.indexOf('.');
      const boxes  = parseInt(str.slice(0, dotIdx))  || 0;
      const pieces = parseInt(str.slice(dotIdx + 1)) || 0;   // e.g. "6" not "0.6"

      // safety: if pieces >= ppp, carry over
      const totalBoxes = boxes + Math.floor(pieces / PPP);
      const remPieces  = pieces % PPP;
      return totalBoxes + remPieces / PPP;
    }

    /**
     * Convert backend float → display string for qty input
     * 1.5  ppp=12  → "1.6"
     * 2.0  ppp=12  → "2"
     * 0.5  ppp=12  → "0.6"
     */
    function toDisplayQty(backendQty, ppp) {
      const PPP = parseInt(ppp) || 1;
      const val = parseFloat(backendQty) || 0;
      if (!PPP_MODE || PPP <= 1) return val || '';

      const boxes  = Math.floor(Math.round(val * PPP) / PPP);
      const pieces = Math.round((val - boxes) * PPP);

      if (pieces === 0) return String(boxes);
      return `${boxes}.${pieces}`;   // intentional: "1.6" not "1.50"
    }

    /**
     * Show a compact hint below qty: "1 box + 6 pcs = 18 pcs"
     */
    function updateQtyHint($row) {
      if (!PPP_MODE) return;
      const ppp    = parseInt($row.data('ppp') || 1) || 1;
      if (ppp <= 1) return;
      const dispVal  = $row.find('.qty-input').val();
      const backend  = parseDisplayQty(dispVal, ppp);
      const boxes    = Math.floor(Math.round(backend * ppp) / ppp);
      const pieces   = Math.round((backend - boxes) * ppp);
      const totalPcs = Math.round(backend * ppp);

      let hint = '';
      if (dispVal && backend > 0) {
        if (boxes > 0 && pieces > 0) {
          hint = `${boxes} box + ${pieces} pcs = ${totalPcs} pcs`;
        } else if (boxes > 0) {
          hint = `${boxes} box = ${totalPcs} pcs`;
        } else {
          hint = `${pieces} pcs`;
        }
      }

      let $hint = $row.find('.qty-ppp-hint');
      if (!$hint.length) {
        $hint = $('<div class="qty-ppp-hint text-primary" style="font-size:.7rem;line-height:1.2;white-space:nowrap;"></div>');
        $row.find('.qty-input').after($hint);
      }
      $hint.text(hint);
    }


    // Code field disable rule: barcode == 0/false and show_purchase_code_column != true
    const CODE_DISABLED =
      (!PURCHASE_FLAGS?.show_purchase_code_column) &&
      (
        PURCHASE_FLAGS?.barcode === 0 ||
        PURCHASE_FLAGS?.barcode === '0' ||
        PURCHASE_FLAGS?.barcode === false ||
        typeof PURCHASE_FLAGS?.barcode === 'undefined' ||
        PURCHASE_FLAGS?.barcode === null
      );
    const WAREHOUSE_DISABLED =
      (!PURCHASE_FLAGS?.show_purchase_warehouse_column);

    // Map: flag → column selector
    const COL_FLAG_MAP = [
      ['show_purchase_code_column',             '.col-code'],
      ['show_purchase_margin_column',           '.col-margin'],
      ['show_purchase_serial_column',           '.sno'],
      ['show_purchase_retail_column',           '.col-retail'],
      ['show_purchase_gst_column',              '.col-gst'],
      ['show_purchase_ftax_column',             '.col-ftax'],
      ['show_purchase_disc_column',             '.col-discamt'],
      ['show_purchase_disc_percent_column',     '.col-discpct'],
      ['show_purchase_bonus_column',            '.col-bonus'],
      ['show_purchase_extras_column',           '.col-extras'],
      ['show_purchase_batch_column',            '.col-batch'],
      ['show_purchase_expiry_column',           '.col-expiry'],
      ['show_purchase_warehouse_column',        '.col-speca'],
    ];

    function openSpecASearch($row){
      const $sel = $row.find('.speca-select');
      if ($sel.data('select2')) $sel.select2('open');
    }

    function applyPickedProduct($row, d){
      $row.find('.serials-json').val('[]');
      setExtrasIcons($row);

      const code = d.product_code || d.code || '';
      updateInfoBar(code);
      $row.find('.code-input').val(code);

      // ── CURRENCY: product prices from DB are in BASE currency
      //    Divide by CURR.rate to display in selected currency
      const basePurch  = parseFloat(d.purchase_price ?? d.purchase ?? 0);
      const baseRetail = parseFloat(d.l_sale_price   ?? d.retail   ?? 0);
      const dispPurch  = CURR.rate > 0 ? basePurch  / CURR.rate : basePurch;
      const dispRetail = CURR.rate > 0 ? baseRetail / CURR.rate : baseRetail;
      const ppp = parseInt(d.pieces_per_pack || d.ppp || 1) || 1;

      $row.data('ppp', ppp);
      $row.data('base-purchase', basePurch);
      $row.data('base-retail',   baseRetail);

      $row.find('.purchase-input').val(dispPurch  || '');
      $row.find('.retail-input').val(dispRetail   || '');
      // ── auto-fill margin from loaded prices ───────────────────────────
      $row.find('.margin-input').val('');

      // for code-hidden flow (important)
      $row.find('.name-select').data('product_code', code);

      // serial flag + gate
      if (typeof d.is_serial_tracked !== 'undefined') {
        $row.find('.is-serial-tracked').val(
          (d.is_serial_tracked === true || d.is_serial_tracked === 1 || d.is_serial_tracked === '1') ? '1' : '0'
        );
        gateSerialButton($row);
      }

      recalcRow($row);
      recalcAll();

      if (!WAREHOUSE_DISABLED){
        ensureSpecCaches(() => {
          initInlineSpecASelect2($row, '');
          if ((SPEC_A_CACHE || []).length) {
            openSpecASearch($row);
          } else {
            $row.find('.qty-input').focus();
          }
        });
      }else{
        $row.find('.qty-input').focus();
      }
    }

    function isLastVisibleEditableInRow($el){
      const $row = $el.closest('tr');
      const $controls = $row.find('input:visible').not('[type=hidden]');
      const idx = $controls.index($el);
      return idx === $controls.length - 1;
    }

    function applyColumnVisibility(flags){
      COL_FLAG_MAP.forEach(([key, sel]) => {
        const on = !!(flags && flags[key]);
        const $cells = $('#table_products').find('th'+sel+', td'+sel);
        $cells.each(function(){
          this.style.setProperty('display', on ? 'table-cell' : 'none', 'important');
        });

        if (!on && sel !== '.col-extras' && sel !== '.col-code'){
          $('#table_products tbody').find('td'+sel+' input').each(function(){
            if (this.type === 'number')    $(this).val('');
            else if (this.type === 'text') $(this).val('');
            else if (this.type === 'date') $(this).val('');
          });
        }
      });

      if (typeof recalcAll === 'function') recalcAll();
    }

    function openNameSearch($row){
      const $sel = $row.find('.name-select');
      if (!$sel.data('select2')) {
        $sel.select2({ theme:'bootstrap4', width:'100%' });
      }
      $sel.select2('open');
      setTimeout(() => {
        const fld = document.querySelector('.select2-container--open .select2-search__field');
        if (fld) fld.focus();
      }, 0);
    }

    const common = { theme: 'bootstrap4', width: '100%' };

    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;

    window.__INITIAL_PURCHASE__ = {{ initial_purchase_json|default:"null"|safe }};

    const SPEC_URL = '{% url "purchases:get_spec_terms" %}';
    let SPEC_A_CACHE = null;
    let SPEC_B_CACHE = null;

    let __lastFocusInTable = null;
    $('#table_products').on('focusin', 'input:visible', function(){
      const $cur = $(this);
      const $prev = __lastFocusInTable;
      __lastFocusInTable = $cur;

      if ($prev && $prev.hasClass('code-input')) {
        const $row = $prev.closest('tr');
        const codeVal = ($prev.val() || '').trim();

        if (CODE_DISABLED || !codeVal) {
          setTimeout(() => openNameSearch($row), 0);
        }
      }
    });

    $('#table_products').on('focusin', '.code-input', function(){
      if (!CODE_DISABLED) return;
      const $row = $(this).closest('tr');
      setTimeout(() => openNameSearch($row), 0);
    });

    function normalizeSpecPayload(data){
      const arr = Array.isArray(data) ? data : (Array.isArray(data.results) ? data.results : []);
      return arr.map(it => ({
        id:   it.id ?? it.value ?? it.name,
        text: it.text ?? it.label ?? it.name
      }));
    }

    function initSpecSelect2($select, type, selectedId){
      if ($select.data('select2')) { $select.off('select2:open').select2('destroy'); }
      $select.empty();

      $select.select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Select…',
        minimumInputLength: 0,
        ajax: {
          url: SPEC_URL,
          type: 'POST',
          headers: { 'X-CSRFToken': csrftoken },
          delay: 200,
          data: params => ({ type, term: params.term || '' }),
          processResults: data => ({ results: normalizeSpecPayload(data) }),
          cache: true
        }
      }).on('select2:open', () => {
        setTimeout(() => {
          const fld = document.querySelector('.select2-container--open .select2-search__field');
          if (fld) fld.focus();
        }, 0);
      });

      if (selectedId != null && selectedId !== '') {
        const cache = (type === 'A') ? SPEC_A_CACHE : SPEC_B_CACHE;
        const found = cache && cache.find(it => String(it.id) === String(selectedId));
        const opt   = new Option(found ? found.text : String(selectedId), String(selectedId), true, true);
        $select.append(opt).trigger('change');
      }
    }

    function fetchSpecTerms(type){
      return $.ajax({
        url: SPEC_URL,
        type: 'POST',
        headers: { 'X-CSRFToken': csrftoken },
        data: { type }
      }).then(resp => normalizeSpecPayload(resp));
    }

    function ensureSpecCaches(cb){
      const pA = SPEC_A_CACHE
        ? $.Deferred().resolve().promise()
        : fetchSpecTerms('A').then(list => { SPEC_A_CACHE = list; });

      const pB = SPEC_B_CACHE
        ? $.Deferred().resolve().promise()
        : fetchSpecTerms('B').then(list => { SPEC_B_CACHE = list; });

      const whenAll = $.when(pA, pB);
      if (typeof cb === 'function') whenAll.done(cb);
      return whenAll;
    }

    function fillSpecSelect($select, items, selectedId){
      $select.empty();
      $select.append(new Option('', '', true, false));
      items.forEach(it => $select.append(new Option(it.text, it.id)));

      if ($select.data('select2')) {
        $select.off('select2:open').select2('destroy');
      }
      $select.select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Select...'
      }).on('select2:open', () => {
        setTimeout(() => {
          const fld = document.querySelector('.select2-container--open .select2-search__field');
          if (fld) fld.focus();
        }, 0);
      });

      if (selectedId != null && selectedId !== '') {
        $select.val(String(selectedId)).trigger('change');
      }
    }

    // 3) Party Select2
    function billTypeParty(bt) {
      return (bt === 'vendor_purchase' || bt === 'vendor_return') ? 'vendor' : 'customer';
    }

    function initPartySelect2(){
      const bt   = $('#ui_bill_type').val();
      const type = billTypeParty(bt);
      const url  = type === 'vendor'
        ? '{% url "purchases:get_vendors" %}'
        : '{% url "customers:get_customers" %}';

      if ($('#vendor_select').data('select2')) {
        $('#vendor_select').select2('destroy');
      }

      $('#vendor_select').select2({
        ...common,
        placeholder: type === 'vendor' ? 'Search vendor…' : 'Search customer…',
        minimumInputLength: 1,
        allowClear: true,
        dropdownParent: $(document.body),
        ajax: {
          url: url,
          type: 'POST',
          headers: { 'X-CSRFToken': csrftoken },
          delay: 250,
          data: params => ({ term: params.term }),
          processResults: data => {
            let items = Array.isArray(data) ? data
              : Array.isArray(data.results) ? data.results : [];
            const mapped = items.map(v => ({
              id:   v.value ?? v.id,
              text: v.label ?? v.text
            }));
            return { results: mapped };
          },
          cache: true
        },
        templateResult: r => r.loading ? r.text : $('<div>'+r.text+'</div>'),
        templateSelection: r => r.text
      })
      .on('select2:open', () => {
        setTimeout(() => {
          const fld = document.querySelector('.select2-container--open .select2-search__field');
          if (fld) fld.focus();
        }, 0);
      })
      .on('select2:select', () => {
        if (CODE_DISABLED) openNameSearch($('#table_products tbody tr:not(.template-row)').last());
        else $('#table_products tbody tr:not(.template-row)').last().find('.code-input').focus();
      });
    }

    setTimeout(() => $('#vendor_select').select2('open'), 0);


    function addRow(data = {}) {
      const $row = $('.template-row')
        .clone()
        .removeClass('template-row d-none');
      $('#table_products tbody').append($row);

      $('#table_products tbody tr:not(.template-row)').each((i, tr) => {
        $(tr).find('.sno').text(i + 1);
      });

      Object.entries(data).forEach(([k, v]) => {
        const $inp = $row.find('.' + k + '-input');
        if ($inp.length) $inp.val(v);
      });

      const $nameSel = $row.find('.name-select');

      $nameSel.select2({
        ...common,
        placeholder: 'Search product…',
        minimumInputLength: 1,
        allowClear: true,
        tags: false,

        ajax: {
          url: '{% url "products:get_products" %}',
          type: 'POST',
          headers: { 'X-CSRFToken': csrftoken },
          delay: 250,
          data: params => ({ term: params.term }),
          processResults: (resp, params) => {
            const results = Array.isArray(resp) ? resp : (resp.results || []);
            const term = (params.term || '').trim();
            if (term && results.length === 0) {
              results.push({
                id: '__create__:' + term,
                text: term,
                newTag: true
              });
            }
            return { results };
          }
        },

        templateResult: r => {
          if (r.loading) return r.text;
          if (r.newTag) {
            return $(`<div class="text-primary"><i class="fas fa-plus"></i> Create: <strong>${r.text}</strong></div>`);
          }
          return $(`
            <div>
              <strong>${r.text}</strong><br/>
              <small>${r.category || ''}</small><br/>
              <span>$${r.l_sale_price ?? ''}</span>
            </div>
          `);
        },
        templateSelection: r => r.text
      })
      .on('select2:open', () => {
        setTimeout(() => {
          const fld = document.querySelector('.select2-container--open .select2-search__field');
          if (fld) fld.focus();
        }, 0);
      })
      .on('select2:select', e => {
        const d = e.params.data;

        if (d && d.newTag) {
          $nameSel.val(null).trigger('change');
          qpOpen({ $row, name: d.text });
          return;
        }

        applyPickedProduct($row, d);
      });

      const _spec_id = (data.spec_a_id != null) ? String(data.spec_a_id) : '';
      ensureSpecCaches(() => initInlineSpecASelect2($row, _spec_id));

      if (data.prod_id && data.name) {
        const preopt = new Option(data.name, data.prod_id, true, true);
        $nameSel.append(preopt).trigger('change');
      }

      // ── CURRENCY: on addRow from edit prefill, store base values
      //    and display in selected currency
      const rawPurch  = parseFloat(data.purchase ?? 0);
      const rawRetail = parseFloat(data.retail   ?? 0);

      // In edit mode, DB values ARE already in base currency
      // Display them in current selected currency
      const dispPurch  = (rawPurch  && CURR.rate > 0) ? rawPurch  / CURR.rate : rawPurch;
      const dispRetail = (rawRetail && CURR.rate > 0) ? rawRetail / CURR.rate : rawRetail;

      $row.data('base-purchase', rawPurch);
      $row.data('base-retail',   rawRetail);

      // PPP: convert backend qty → display format for edit prefill
      const _ppp = parseInt(data.ppp || 1) || 1;
      $row.data('ppp', _ppp);
      const _rawQty = parseFloat(data.qty ?? data.quantity ?? 0) || 0;
      $row.find('.qty-input').val(_rawQty ? toDisplayQty(_rawQty, _ppp) : '');
      $row.find('.purchase-input').val(dispPurch  || '');
      $row.find('.retail-input').val(dispRetail   || '');
      $row.find('.margin-input').val('');   // margin always starts blank
      $row.find('.discamt-input').val(data.disc_amt ?? data.discount ?? '');
      $row.find('.discpct-input').val(data.disc_pct ?? data.disc ?? '');
      $row.find('.bonus-input').val(data.bonus ?? data.bonus_qty ?? '');
      $row.find('.batch-input').val(data.batch ?? '');
      $row.find('.expiry-input').val(data.expiry ?? '');

      const sList  = Array.isArray(data.serials) ? data.serials : [];
      $row.find('.serials-json').val(JSON.stringify(sList));

      if (sList.length > 0) {
        $row.find('.is-serial-tracked').val('1');
      }

      if (data.is_serial_tracked != null) {
        $row.find('.is-serial-tracked').val(data.is_serial_tracked ? '1' : '0');
      }

      setExtrasIcons($row);
      gateSerialButton($row);

      recalcRow($row);
      recalcAll();
      afterAddRow($row);
      applyColumnVisibility(PURCHASE_FLAGS);

      return $row;
    }

    // Start with one blank row
    addRow();
    applyColumnVisibility(PURCHASE_FLAGS);

    // Delete row handler
    $('#table_products').on('click', '.delete-row', function () {
      const $row  = $(this).closest('tr');
      const $rows = $('#table_products tbody tr:not(.template-row)');

      if ($rows.length <= 1) {
        Swal.fire('At least one row is required', '', 'info');
        return;
      }

      const $next = $row.nextAll(':not(.template-row)').first();
      const $prev = $row.prevAll(':not(.template-row)').first();

      $row.remove();

      $('#table_products tbody tr:not(.template-row)').each((i, tr) => {
        $(tr).find('.sno').text(i + 1);
      });

      recalcAll();

      const $target = $next.length ? $next : ($prev.length ? $prev : $('#table_products tbody tr:not(.template-row)').last());
      if (typeof CODE_DISABLED !== 'undefined' && CODE_DISABLED) {
        openNameSearch($target);
      } else {
        const $code = $target.find('.code-input');
        if ($code.length) $code.focus();
        else openNameSearch($target);
      }
    });


    // Code → lookup on Enter
    $('#table_products').on('keydown','.code-input',function(e){
      if (e.which===13){
        e.preventDefault();
        const $r = $(this).closest('tr'), code = $(this).val().trim();
        if (!code){
          $r.find('.name-select').select2('open');
          return;
        }
      $.get("{% url 'products:search_product' %}", { product_code: code }, resp => {
      if (resp.error) {
        qpOpen({ $row: $r, code: code });
      } else {
        $r.find('.name-select')
          .append(new Option(resp.name, resp.id, true, true))
          .trigger('change');

        applyPickedProduct($r, resp);
      }

      });

      }
    });

    // Per‐row recalculation
    // NOTE: All calculations are in the CURRENTLY SELECTED currency.
    // Conversion to base happens only at Save time (in btnSave).
    function recalcRow($r){

      const codeVal = $r.find('.code-input').val().trim();
      if (!codeVal) {
        $r.find('.total-cell').text('0.00');
        return;
      }

      const _rowPpp = parseInt($r.data('ppp') || 1) || 1;
      const q = parseDisplayQty($r.find('.qty-input').val(), _rowPpp);
      const p   = parseFloat($r.find('.purchase-input').val())||0;
      const g   = parseFloat($r.find('.gst-input').val())||0;
      const f   = parseFloat($r.find('.ftax-input').val())||0;
      const da  = parseFloat($r.find('.discamt-input').val())||0;
      const dp  = parseFloat($r.find('.discpct-input').val())||0;
      const b   = parseFloat($r.find('.bonus-input').val())||0;

      const full = q*p;
      const tax  = full*(g+f)/100;
      const net  = full + tax - da;
      const tot  = net;
      $r.find('.total-cell').text(tot.toFixed(2));
    }

    function handlePctChange($r){

      const _pctPpp = parseInt($r.data('ppp') || 1) || 1;
      const q = parseDisplayQty($r.find('.qty-input').val(), _pctPpp);
      // const q   = parseFloat($r.find('.qty-input').val())||0;
      const p   = parseFloat($r.find('.purchase-input').val())||0;
      const g   = parseFloat($r.find('.gst-input').val())||0;
      const f   = parseFloat($r.find('.ftax-input').val())||0;
      const da  = parseFloat($r.find('.discamt-input').val())||0;
      const dp  = parseFloat($r.find('.discpct-input').val())||0;

      const full = q*p;
      const tax  = full*(g+f)/100;
      const net  = full + tax;
      const dis_per_amt = full * 0.01 * dp;
      $r.find('.discamt-input').val(dis_per_amt.toFixed(2));
      recalcRow($r);
      recalcAll();
    }

    // Recalc all & grand total
    function recalcAll(){
      let sub = 0;
      $('#table_products tbody tr:not(.template-row)').each(function(){
        sub += parseFloat($(this).find('.total-cell').text()) || 0;
      });
      $('#sub_total').val(sub.toFixed(2));

      const fd  = parseFloat($('#flat_disc_amount').val()) || 0;
      const oe  = parseFloat($('#other_charges').val())    || 0;
      const be  = parseFloat($('#builty_expenses').val())  || 0;
      const gst = parseFloat($('#flat_gst').val())         || 0;
      const ft  = parseFloat($('#f_tax').val())            || 0;

      const base    = sub - fd + oe;
      const taxGst  = base * (gst / 100);
      const taxF    = base * (ft  / 100);
      const grand   = base + taxGst + taxF;

      $('#grand_total').val(grand.toFixed(2));

      // ── CURRENCY: show base-equivalent hint when non-base currency active
      if (!CURR.is_base && CURR.rate > 0){
        const grandBase = grand * CURR.rate;
        $('#curr-base-hint').text(`= ${grandBase.toFixed(2)} (base)`);
      } else {
        $('#curr-base-hint').text('');
      }

      updateBalance();
      recalcInfoBarTotals();
    }

    // Paid / Balance handling (Paid is in the SELECTED display currency)
    function updateBalance(){
      const grand = parseFloat($('#grand_total').val()) || 0;
      let paid    = parseFloat($('#paid_amount').val())  || 0;
      if (paid < 0) { paid = 0; $('#paid_amount').val(0); }
      const bal = grand - paid;
      $('#balance_due').val(bal.toFixed(2));
      $('#balance_due')
        .toggleClass('is-clear', Math.abs(bal) < 0.005)
        .toggleClass('is-due',  bal > 0.005);
    }

    // Show the Payment box only for purchase bills (we pay vendor/customer)
    function syncPaymentBoxVisibility(){
      const bt = $('#ui_bill_type').val();
      const isPurchase = (bt === 'vendor_purchase' || bt === 'customer_purchase');
      $('#payment-box').toggle(isPurchase);
      if (!isPurchase){ $('#paid_amount').val(''); $('#bank_select').val('0'); }
      updateBalance();
    }

    $('#paid_amount').on('keyup change input', updateBalance);
    $('#btnPayFull').on('click', function(){
      const grand = parseFloat($('#grand_total').val()) || 0;
      $('#paid_amount').val(grand.toFixed(2));
      updateBalance();
    });

    // Disc % → compute Disc Amount, then recalc
    $('#flat_disc_pct').on('keyup change', function(){
      const sub = parseFloat($('#sub_total').val()) || 0;
      const pct = parseFloat($(this).val()) || 0;
      const amt = sub * pct / 100;
      $('#flat_disc_amount').val(amt.toFixed(2));
      recalcAll();
    });

    // Disc Amount → compute Disc %, then recalc
    $('#flat_disc_amount').on('keyup change', function(){
      const sub = parseFloat($('#sub_total').val()) || 0;
      const amt = parseFloat($(this).val()) || 0;
      const pct = sub ? (amt / sub * 100) : 0;
      $('#flat_disc_pct').val(pct.toFixed(2));
      recalcAll();
    });

    $('#other_charges, #builty_expenses, #flat_gst, #f_tax')
      .on('keyup change', recalcAll);

    recalcAll();

    // Any input → recalc
    $('#table_products').on('input', 'input:not(.discpct-input)', function(){
      const $row = $(this).closest('tr');
      recalcRow($row);
      recalcAll();
      if ($(this).hasClass('qty-input')) updateQtyHint($row);
    });

    $('#table_products').on('input', '.discpct-input', function(){
      const $row = $(this).closest('tr');
      handlePctChange($row);
      recalcAll();
    });

    // ══════════════════════════════════════════════════════════════════════
    // MARGIN (%) ↔ RETAIL / PURCHASE
    //  Margin typed  → Retail  = Purchase × (1 + Margin/100)
    //  Retail typed  → if Margin > 0: Purchase = Retail / (1 + Margin/100)
    //                  if Margin = 0: do nothing to Purchase
    //  Purchase typed → do NOT touch Margin or Retail
    // ══════════════════════════════════════════════════════════════════════

    $('#table_products').on('input', '.margin-input', function () {
      const $row   = $(this).closest('tr');
      const pur    = parseFloat($row.find('.purchase-input').val()) || 0;
      const margin = parseFloat($(this).val()) || 0;
      $row.find('.retail-input').val((pur * (1 + margin / 100)).toFixed(2));
      recalcRow($row);
      recalcAll();
    });

    $('#table_products').on('input', '.retail-input', function () {
      const $row   = $(this).closest('tr');
      const ret    = parseFloat($(this).val()) || 0;
      const margin = parseFloat($row.find('.margin-input').val()) || 0;
      if (margin > 0) {
        $row.find('.purchase-input').val((ret / (1 + margin / 100)).toFixed(4));
      }
      recalcRow($row);
      recalcAll();
    });

    $('#table_products').on('input', '.purchase-input', function () {
      const $row   = $(this).closest('tr');
      const pur    = parseFloat($(this).val()) || 0;
      const margin = parseFloat($row.find('.margin-input').val()) || 0;
      if (margin > 0) {
        $row.find('.retail-input').val((pur * (1 + margin / 100)).toFixed(2));
      }
      recalcRow($row);
      recalcAll();
    });

    const FOOTER_FIELDS = '#flat_discount, #other_charges, #builty_expenses, #flat_gst, #f_tax';

    let __footerPointer = false;
    $(document).on('pointerdown mousedown touchstart', FOOTER_FIELDS, function(){
      __footerPointer = true;
    });

    $(document).on('focusin', FOOTER_FIELDS, function(){
      if (__footerPointer) { __footerPointer = false; return; }

      const $prev = __lastFocusInTable;
      if (!$prev || !$prev.length) return;
      if (!isLastVisibleEditableInRow($prev)) return;

      const $row = $prev.closest('tr');
      tryAddOrFocusNewRow($row);
    });

    function isRowFilled($row) {
      let code = ($row.find('.code-input').val() || '').trim();
      if (!code) {
        const selCode = $row.find('.name-select').data('product_code');
        if (selCode) code = String(selCode);
      }
      return !!code;
    }

    function focusRowStart($row) {
      if (CODE_DISABLED) openNameSearch($row);
      else $row.find('.code-input').focus();
    }

    function tryAddOrFocusNewRow($currentRow) {
      let codeVal = ($currentRow.find('.code-input').val() || '').trim();
      if (!codeVal) {
        const selCode = $currentRow.find('.name-select').data('product_code');
        if (selCode) codeVal = String(selCode);
      }
      const qtyVal = parseFloat($currentRow.find('.qty-input').val()) || 0;
      if (!codeVal || qtyVal <= 0) return;

      const $lastRow = $('#table_products tbody tr:not(.template-row)').last();
      if (!$currentRow.is($lastRow) && !isRowFilled($lastRow)) {
        focusRowStart($lastRow);
        return;
      }
      if ($currentRow.is($lastRow) && !isRowFilled($lastRow) && !codeVal) {
        return;
      }

      const $new = addRow();
      focusRowStart($new);
    }

    $('#table_products').on('keydown', 'input, .name-select', function(e) {
      if (e.which !== 13) return;
      e.preventDefault();

      const $row = $(this).closest('tr');

      const $controls = $row.find('input:visible').not('[type=hidden]');
      const idx = $controls.index(this);
      if (idx < $controls.length - 1) {
        $controls.eq(idx + 1).focus();
      } else {
        tryAddOrFocusNewRow($row);
      }
    });

    // Arrow-key navigation in the products table
    $('#table_products').on('keydown', 'input:visible, select:visible', function(e) {
      const LEFT  = 37;
      const RIGHT = 39;
      if (e.which !== LEFT && e.which !== RIGHT) return;

      e.preventDefault();
      const $controls = $('#table_products')
        .find('input:visible, select:visible')
        .not('.template-row input, .template-row select');
      const idx = $controls.index(this);
      const targetIdx = (e.which === RIGHT) ? idx + 1 : idx - 1;

      if (targetIdx >= 0 && targetIdx < $controls.length) {
        $controls.eq(targetIdx).focus();
      }
    });

    // Up/Down arrow navigation in the products table
    $('#table_products').on('keydown', 'input:visible, select:visible', function(e) {
      const UP   = 38;
      const DOWN = 40;
      if (e.which !== UP && e.which !== DOWN) return;

      e.preventDefault();
      const $cell     = $(this).closest('td');
      const colIndex  = $cell.index();
      const $rows     = $('#table_products tbody tr').not('.template-row');
      const rowIndex  = $rows.index( $cell.closest('tr') );
      const targetRow = (e.which === DOWN)
        ? $rows.eq(rowIndex + 1)
        : $rows.eq(rowIndex - 1);

      if (!targetRow.length) return;
      const $targetCell = targetRow.find('td').eq(colIndex);
      const $ctrl       = $targetCell.find('input:visible, select:visible').first();
      if (!$ctrl.length) return;

      $ctrl.focus();
    });

    // ── SAVE BUTTON ────────────────────────────────────────────────────────
    $('#btnSave').click(()=>{
      if (!$('#vendor_select').val()) {
        Swal.fire('Please select a party','','warning'); return;
      }
      const payload = {
        ui_bill_type:  $('#ui_bill_type').val(),
        vendor:        $('#vendor_select').val(),
        date:          $('#purchase_date').val(),
        challan:       $('#challan').val(),
        remarks:       $('#remarks').val(),
        flat_discount: $('#flat_disc_amount').val(),
        builty_expenses: $('#builty_expenses').val(),
        other_charges: $('#other_charges').val(),
        flat_gst:      $('#flat_gst').val(),
        f_tax:         $('#f_tax').val(),
        grand_total:   $('#grand_total').val(),
        sub_total:     $('#sub_total').val(),

        // ── Payment (Paid amount in SELECTED display currency) ──────────
        paid:          $('#paid_amount').val() || 0,
        bank_id:       $('#bank_select').val() || 0,

        // ── CURRENCY: include currency info in payload ──────────────────
        // All monetary amounts in payload are in SELECTED (display) currency.
        // Backend will multiply by currency_rate to get base amounts.
        currency_id:   CURR.id   || '',
        currency_rate: CURR.rate || 1,
        // ── END CURRENCY ────────────────────────────────────────────────

        items: []
      };
      let has_valid_row = false;
      $('#table_products tbody tr:not(.template-row)').each(function(){
        const $r = $(this);
        let code = ($r.find('.code-input').val() || '').trim();
        const qty = parseFloat($r.find('.qty-input').val()) || 0;

        if (!code) {
          const selCode = $r.find('.name-select').data('product_code');
          if (selCode) code = String(selCode);
        }

        if (code && qty > 0) {
          has_valid_row = true;
          let specVal = ($r.find(".speca-select").val() || "").trim();
          if (specVal.startsWith('__create__:')) specVal = '';
          payload.items.push({
            code:     code,
            name:     $r.find('.name-select').select2('data')[0]?.text || '',
            qty:      parseDisplayQty($r.find('.qty-input').val(), parseInt($r.data('ppp') || 1) || 1),
            purchase: $r.find('.purchase-input').val(),   // in display currency
            retail:   $r.find('.retail-input').val(),      // in display currency
            gst:      $r.find('.gst-input').val(),
            f_tax:    $r.find('.ftax-input').val(),
            disc_amt: $r.find('.discamt-input').val(),     // in display currency
            disc_pct: $r.find('.discpct-input').val(),
            bonus:    $r.find('.bonus-input').val(),
            batch:    $r.find('.batch-input').val(),
            expiry:   $r.find('.expiry-input').val(),
            total:    $r.find('.total-cell').text(),       // in display currency
            spec_a_id: specVal,
            serials: JSON.parse($r.find('.serials-json').val() || '[]')
          });
        }

      });

      if (!has_valid_row) {
        Swal.fire('Please add at least one valid item to Save this Bill.', '', 'warning');
        return;
      }

      $('#purchase_items').val(JSON.stringify(payload));
      $('.purchaseForm').submit();
    });

    $(document).on('keydown', function(e) {
      if ((e.ctrlKey || e.metaKey) && (e.key === 's' || e.keyCode === 83)) {
        e.preventDefault();
        $('#btnSave').trigger('click');
      }
    });

    // Set Bill Type default (create) OR from server prefill (edit)
    let defaultBT = "{{ initial_ui_bill_type|default:'vendor_purchase' }}";

    {% if initial_purchase_json %}
      const _init = {{ initial_purchase_json|safe }};
      if (_init.ui_bill_type) defaultBT = _init.ui_bill_type;
      $('#ui_bill_type').val(defaultBT).prop('disabled', true);
    {% else %}
      $('#ui_bill_type').val(defaultBT);
    {% endif %}

    initPartySelect2();

    $('#ui_bill_type').on('change', function(){
      $('#vendor_select').val(null).trigger('change');
      initPartySelect2();
      syncPaymentBoxVisibility();
    });
    syncPaymentBoxVisibility();

    setTimeout(() => $('#vendor_select').select2('open'), 0);

    // ── PREFILL ON EDIT ────────────────────────────────────────────────────
    {% if initial_purchase_json %}
    const init = {{ initial_purchase_json|safe }};

    if (init.ui_bill_type) {
      $('#ui_bill_type').val(init.ui_bill_type).prop('disabled', true);
      initPartySelect2();
    }

    let partyOpt = new Option(init.vendor_name, init.vendor, true, true);
    $('#vendor_select').append(partyOpt).trigger('change');

    $('#purchase_date').val(init.date);
    $('#challan').val(init.challan);
    $('#remarks').val(init.remarks);
    $('#flat_disc_amount').val(init.flat_discount);
    const _prefillSub = parseFloat($('#sub_total').val()) || 0;
    if (_prefillSub) {
      $('#flat_disc_pct').val((parseFloat(init.flat_discount || 0) / _prefillSub * 100).toFixed(2));
    }
    $('#builty_expenses').val(init.builty_expenses);
    $('#other_charges').val(init.other_charges);
    $('#flat_gst').val(init.flat_gst);
    $('#f_tax').val(init.f_tax);

    // Payment prefill (paid amount + which bank)
    $('#paid_amount').val(init.paid != null ? init.paid : '');
    $('#bank_select').val(String(init.bank_id != null ? init.bank_id : 0));
    syncPaymentBoxVisibility();

    // ── CURRENCY: load currencies THEN add rows
    //    so that prices convert correctly on edit prefill
    loadCurrencies(function(){
      // If edit bill had a saved currency, restore it
      if (init.currency_id && init.currency_rate){
        const savedCurr = ALL_CURRENCIES.find(c => String(c.id) === String(init.currency_id));
        if (savedCurr){
          applyCurrency({ ...savedCurr, rate: parseFloat(init.currency_rate) });
        }
      }
      $('#table_products tbody tr:not(.template-row)').remove();
      init.items.forEach(item => addRow(item));
      applyColumnVisibility(PURCHASE_FLAGS);
      recalcAll();
    });

    {% else %}
    // NEW invoice: load currencies first, then add blank row
    loadCurrencies(function(){
      // blank row already added above, just recalc
      recalcAll();
    });
    {% endif %}

    recalcAll();

    function initInlineSpecASelect2($row, selectedVal){
      const $sel = $row.find('.speca-select');

      if ($sel.data('select2')) {
        $sel.off('select2:open').select2('destroy');
      }

      $sel.empty().append(new Option('Default Variant', '', true, false));

      $sel.select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Default Variant',
        minimumInputLength: 0,
        allowClear: false,
        tags: false,

        createTag: function(params){
          const term = (params.term || '').trim();
          if (!term) return null;
          return { id: '__create__:' + term, text: term, newTag: true };
        },

        ajax: {
          url: SPEC_URL,
          type: 'POST',
          headers: { 'X-CSRFToken': csrftoken },
          delay: 200,
          data: params => ({ type: 'A', term: params.term || '' }),
          processResults: data => ({ results: normalizeSpecPayload(data) }),
          cache: true
        },

        templateResult: r => {
          if (r.loading) return r.text;
          if (r.newTag) {
            return $(`<div class="text-primary"><i class="fas fa-plus"></i> Create: <strong>${r.text}</strong></div>`);
          }
          return $(`<div>${r.text}</div>`);
        },
        templateSelection: r => r.text
      })
      .on('select2:open', () => {
        setTimeout(() => {
          const fld = document.querySelector('.select2-container--open .select2-search__field');
          if (fld) fld.focus();
        }, 0);
      })
      .on('select2:select', e => {
        $row.find('.qty-input').focus();
      });

      if (selectedVal != null && String(selectedVal).trim() !== '') {
        const found = (SPEC_A_CACHE || []).find(x => String(x.id) === String(selectedVal));
        const opt = new Option(found ? found.text : String(selectedVal), String(selectedVal), true, true);
        $sel.append(opt).trigger('change');
      } else {
        $sel.val('').trigger('change');
      }
    }

    // ---------- Helpers for Extras ----------
    function rowQtyBonus($row){
      const q = parseFloat($row.find('.qty-input').val()) || 0;
      const b = parseFloat($row.find('.bonus-input').val()) || 0;
      return {q, b, total: q + b};
    }

    function setExtrasIcons($row){
      const hasSer = JSON.parse($row.find('.serials-json').val() || '[]').length > 0;
      $row.find('.btn-add-serials').toggleClass('btn-success', hasSer);
    }

    function gateSerialButton($row){
      const serialTracked = ($row.find('.is-serial-tracked').val() === '1');
      const { total } = rowQtyBonus($row);
      const $btn = $row.find('.btn-add-serials');
      if (serialTracked && total > 0) {
        $btn.prop('disabled', false).attr('title', 'Add Serials');
      } else {
        $btn.prop('disabled', true).attr('title', serialTracked ? 'Enter Qty/Bonus first' : 'Product is not serial-tracked');
      }
    }

    $('#table_products').on('input', '.qty-input, .bonus-input', function(){
      const $row = $(this).closest('tr');
      gateSerialButton($row);
    });

    $('#table_products').on('select2:select', '.name-select', function(e){
      const $row = $(this).closest('tr');
      const d = e.params.data || {};
      const track = d.is_serial_tracked ? '1' : '0';
      $row.find('.is-serial-tracked').val(track);
      gateSerialButton($row);
    });

    function _afterProductLookupFillRow($r, resp){
      $r.find('.is-serial-tracked').val(resp.is_serial_tracked ? '1' : '0');
      gateSerialButton($r);
      setExtrasIcons($r);
    }

    // ---------- Serials Modal ----------
    let SM_ctx = { $row: null, required: 0 };

    function sm_recalc(){
      const n = $('#sm-table tbody tr').length;
      $('#sm-entered').text(n);
      const rem = Math.max(0, (SM_ctx.required - n));
      $('#sm-remaining').text(rem);
      $('#sm-save').prop('disabled', rem !== 0);
      $('#sm-table tbody tr').each(function(i){ $(this).find('.sm-sno').text(i+1); });
    }

    $('#sm-add-row').on('click', function(){
      const $tr = $(`
        <tr>
          <td class="sm-sno"></td>
          <td><input type="text" class="form-control form-control-sm sm-serial" placeholder="Scan/Enter serial"></td>
          <td><button type="button" class="btn btn-sm btn-danger sm-del">&times;</button></td>
        </tr>
      `);
      $('#sm-table tbody').append($tr);
      sm_recalc();
    });

    $('#sm-table').on('click', '.sm-del', function(){ $(this).closest('tr').remove(); sm_recalc(); });

    $('#table_products').on('click', '.btn-add-serials', function(){
      const $row = $(this).closest('tr');
      const serialTracked = ($row.find('.is-serial-tracked').val() === '1');
      const { total } = rowQtyBonus($row);
      if (!serialTracked) { Swal.fire('This product is not serial-tracked','','info'); return; }
      if (!total) { Swal.fire('Enter Qty/Bonus first','','info'); return; }

      SM_ctx.$row = $row;
      SM_ctx.required = total;
      $('#sm-required').text(total); $('#sm-entered').text(0); $('#sm-remaining').text(total);
      $('#sm-table tbody').empty();

      const existing = JSON.parse($row.find('.serials-json').val() || '[]');
      if (existing.length){
        existing.forEach(s => { $('#sm-add-row').trigger('click'); $('#sm-table tbody tr').last().find('.sm-serial').val(s.serial_no); });
        sm_recalc();
      }
      $('#serialsModal').modal('show');
    });

    $('#sm-save').on('click', function(){
      const uniq = new Set();
      const rows = [];
      let dup = null;
      $('#sm-table tbody tr').each(function(){
        const code = ($(this).find('.sm-serial').val()||'').trim();
        if (!code) return;
        if (uniq.has(code)) dup = code;
        uniq.add(code);
        rows.push({serial_no: code});
      });
      if (dup){
        Swal.fire('Duplicate serial: '+dup,'','error'); return;
      }
      SM_ctx.$row.find('.serials-json').val(JSON.stringify(rows));
      setExtrasIcons(SM_ctx.$row);
      $('#serialsModal').modal('hide');
    });

    $('#table_products').on('click', '.btn-add-serials', function(){
      const $row = $(this).closest('tr');
      gateSerialButton($row);
    });

    function afterAddRow($row){
      setExtrasIcons($row);
      gateSerialButton($row);
    }

    let __QP = {
      $row: null,
      metaLoaded: false,
      nextProdId: 1,          // ← NEW: filled by qpLoadMeta
    };

    function qpLoadMeta(){
      if (__QP.metaLoaded) return $.Deferred().resolve().promise();

      return $.get(QP_META_URL).then(resp => {
        const $c1 = $('#qp_company');
        const $c2 = $('#qp_category');

        $c1.empty().append(new Option('Select…', ''));
        (resp.companies || []).forEach(x => $c1.append(new Option(x.text, x.id)));

        $c2.empty().append(new Option('Select…', ''));
        (resp.categories || []).forEach(x => $c2.append(new Option(x.text, x.id)));

        // ── store next_prod_id for auto-code generation ──────────────────────
        if (resp.next_prod_id) {
          __QP.nextProdId = resp.next_prod_id;
        }

        __QP.metaLoaded = true;
      });
    }

    function qpOpen({ $row, code = '', name = '' }) {
      __QP.$row = $row;

      // Reset fields (code set AFTER meta loads so we have nextProdId)
      $('#qp_name').val(name || '');
      $('#qp_purchase').val('');
      $('#qp_retail').val('');
      $('#qp_wholesale').val('');
      $('#qp_ppp').val('1');
      $('#qp_code').val(code || '');   // temp — overwritten below if needed

      qpLoadMeta().always(() => {
        // If no code was given (triggered from name-search), auto-generate one
        if (!code) {
          $('#qp_code').val('a-' + __QP.nextProdId);
        }

        $('#quickProductModal').one('shown.bs.modal', function () {
          $('#qp_name').focus().select();
        }).modal('show');
      });
    }

    $('#qp_save').on('click', function(){
      const payload = {
        code: $('#qp_code').val().trim(),
        name: $('#qp_name').val().trim(),
        company_id: $('#qp_company').val(),
        category_id: $('#qp_category').val(),
        purchase: $('#qp_purchase').val(),
        retail: $('#qp_retail').val(),
        wholesale: $('#qp_wholesale').val(),
        pieces_per_pack: $('#qp_ppp').val(),
      };

      if (!payload.code) { Swal.fire('Code required','','warning'); $('#qp_code').focus(); return; }
      if (!payload.name) { Swal.fire('Name required','','warning'); $('#qp_name').focus(); return; }

      $.ajax({
        url: QP_SAVE_URL,
        type: 'POST',
        headers: { 'X-CSRFToken': csrftoken },
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(payload),
        success: function(resp){
          const $row = __QP.$row;
          if (!$row || !$row.length) { $('#quickProductModal').modal('hide'); return; }

          const $sel = $row.find('.name-select');
          $sel.append(new Option(resp.name, resp.id, true, true)).trigger('change');

          applyPickedProduct($row, resp);

          $('#quickProductModal').modal('hide');
          setTimeout(() => $row.find('.qty-input').focus(), 50);
        },
        error: function(xhr){
          const msg = (xhr.responseJSON && xhr.responseJSON.error) ? xhr.responseJSON.error : 'Failed to create product';
          Swal.fire('Error', msg, 'error');
        }
      });
    });

    $('#quickProductModal').on('keydown', 'input, select', function(e){
      if (e.which !== 13) return;
      e.preventDefault();

      const $fields = $('#quickProductForm')
        .find('input, select')
        .filter(':visible:not([disabled])');

      const idx = $fields.index(this);
      if (idx >= 0 && idx < $fields.length - 1){
        $fields.eq(idx + 1).focus();
      } else {
        $('#qp_save').trigger('click');
      }
    });


    // ─── Product Info Bar ───
    const INFO_BAR_URL = '{% url "purchases:product_info_bar" %}';

    const PURCHASE_HISTORY_URL = '{% url "purchases:purchase_history" %}';

    // ══════════════════════════════════════════════════════════════════════
    // PURCHASE HISTORY  (Alt+H)
    // ══════════════════════════════════════════════════════════════════════

    let __ph_code = '';
    let __ph_ppp  = 1;

    function phGetFirstOfMonth() {
      const d = new Date();
      return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-01`;
    }
    function phGetToday() {
      return new Date().toISOString().slice(0, 10);
    }

    function phFormatMoney(v) {
      const n = parseFloat(v) || 0;
      return n.toLocaleString('en-PK', {minimumFractionDigits:2, maximumFractionDigits:2});
    }

    function phLoad(code, dateFrom, dateTo) {
      if (!code) return;
      __ph_code = code;
      $('#ph-loading').show();
      $('#ph-tbody').html(
        '<tr><td colspan="9" class="text-center text-muted py-3">' +
        '<i class="fas fa-spinner fa-spin me-1"></i>Loading…</td></tr>'
      );
      $('#ph-tfoot').hide();

      $.get(PURCHASE_HISTORY_URL, { code, date_from: dateFrom, date_to: dateTo })
        .done(function (resp) {
          const rows  = resp.rows || [];
          const label = resp.product_name ? `— ${resp.code} | ${resp.product_name}` : '';
          $('#ph-product-label').text(label);
          $('#ph-row-count').text(rows.length);
          $('#ph-loading').hide();

          if (!rows.length) {
            $('#ph-tbody').html(
              '<tr><td colspan="9" class="text-center text-muted py-4">' +
              '<i class="fas fa-inbox fa-2x d-block mb-2 opacity-25"></i>' +
              'No purchases found in this period</td></tr>'
            );
            return;
          }

          let html = '';
          let sumQty=0, sumBonus=0, sumTotal=0;

          rows.forEach((r, i) => {
            const qty   = parseFloat(r.qty   || 0);
            const bonus = parseFloat(r.bonus || 0);
            const total = parseFloat(r.total || 0);
            const price = parseFloat(r.price || 0);
            const disc  = parseFloat(r.disc  || 0);
            sumQty   += qty;
            sumBonus += bonus;
            sumTotal += total;

            // PPP display
            const dispQty = PPP_MODE && __ph_ppp > 1
              ? toDisplayQty(qty, __ph_ppp)
              : (qty % 1 === 0 ? qty : qty.toFixed(3));

            html += `
              <tr>
                <td class="px-3 text-muted">${i+1}</td>
                <td>${r.date}</td>
                <td>
                  <a href="{% url 'purchases:purchases_list' %}?search=${r.bill_no}"
                     target="_blank" class="text-primary fw-semibold">#${r.bill_no}</a>
                </td>
                <td>${r.vendor || '—'}</td>
                <td class="text-end fw-semibold">${dispQty}</td>
                <td class="text-end text-success">${bonus > 0 ? bonus : '—'}</td>
                <td class="text-end">${phFormatMoney(price)}</td>
                <td class="text-end text-danger">${disc > 0 ? phFormatMoney(disc) : '—'}</td>
                <td class="text-end fw-bold text-primary">${phFormatMoney(total)}</td>
              </tr>`;
          });

          $('#ph-tbody').html(html);

          // Summary row
          const dispSumQty = PPP_MODE && __ph_ppp > 1
            ? toDisplayQty(sumQty, __ph_ppp) : sumQty.toFixed(2);
          $('#ph-sum-qty').text(dispSumQty);
          $('#ph-sum-bonus').text(sumBonus > 0 ? sumBonus : '—');
          $('#ph-sum-total').text(phFormatMoney(sumTotal));
          $('#ph-tfoot').show();
        })
        .fail(function () {
          $('#ph-loading').hide();
          $('#ph-tbody').html(
            '<tr><td colspan="9" class="text-center text-danger py-3">' +
            '<i class="fas fa-exclamation-triangle me-1"></i>Failed to load</td></tr>'
          );
        });
    }

    function phOpen(code, ppp) {
      __ph_code = code || '';
      __ph_ppp  = parseInt(ppp || 1) || 1;
      if (!__ph_code) return;

      // Default dates: first of month → today
      $('#ph-date-from').val(phGetFirstOfMonth());
      $('#ph-date-to').val(phGetToday());

      $('#purchaseHistoryModal').modal('show');
      phLoad(__ph_code, phGetFirstOfMonth(), phGetToday());
    }

    // Search button
    $('#ph-search-btn').on('click', function () {
      phLoad(__ph_code, $('#ph-date-from').val(), $('#ph-date-to').val());
    });

    // Enter inside date inputs also triggers search
    $('#ph-date-from, #ph-date-to').on('keydown', function (e) {
      if (e.which === 13) $('#ph-search-btn').trigger('click');
    });

    // ── Alt+H shortcut ────────────────────────────────────────────────────
    $(document).on('keydown', function (e) {
      if (!e.altKey || e.key !== 'h' && e.key !== 'H') return;
      e.preventDefault();

      // Find the active/focused row
      let $row = $(document.activeElement).closest('tr');
      if (!$row.length || $row.hasClass('template-row')) {
        $row = $('#table_products tbody tr:not(.template-row)').last();
      }
      if (!$row.length) return;

      let code = ($row.find('.code-input').val() || '').trim();
      if (!code) {
        const selCode = $row.find('.name-select').data('product_code');
        if (selCode) code = String(selCode);
      }
      if (!code) { Swal.fire('Select a product row first', '', 'info'); return; }

      const ppp = parseInt($row.data('ppp') || 1) || 1;
      phOpen(code, ppp);
    });



    const __infoBarCache = {};
    let __infoBarLastCode = '';

    function updateInfoBar(productCode) {
      if (!productCode) {
        $('#product-info-bar').css('display', 'none');
        __infoBarLastCode = '';
        return;
      }
      if (productCode === __infoBarLastCode) return;
      __infoBarLastCode = productCode;

      if (__infoBarCache[productCode]) {
        renderInfoBar(__infoBarCache[productCode]);
        return;
      }
      $.get(INFO_BAR_URL, { code: productCode }, function(resp) {
        if (resp && resp.stock !== undefined) {
          __infoBarCache[productCode] = resp;
          renderInfoBar(resp);
        }
      });
    }

    function renderInfoBar(d) {
      $('#pib-stock').text(parseFloat(d.stock || 0).toFixed(0));
      $('#pib-ppp').text(d.ppp || 0);
      // Last purchase in display currency
      const lastBase = parseFloat(d.last_purchase || 0);
      const lastDisp = CURR.rate > 0 ? lastBase / CURR.rate : lastBase;
      $('#pib-last-purchase').text(lastDisp.toFixed(2));
      $('#product-info-bar').css('display', '');
    }

    function recalcInfoBarTotals() {
          let totalItems = 0;
          let totalQty = 0;
          $('#table_products tbody tr:not(.template-row)').each(function() {
            const $r = $(this);
            let code = ($r.find('.code-input').val() || '').trim();
            if (!code) {
              const selCode = $r.find('.name-select').data('product_code');
              if (selCode) code = String(selCode);
            }
            if (!code) return;

            totalItems++;
            const q = parseFloat($r.find('.qty-input').val()) || 0;
            const b = parseFloat($r.find('.bonus-input').val()) || 0;
            totalQty += (q + b);
          });
          $('#pib-total-items').text(totalItems);
          $('#pib-total-qty').text(totalQty % 1 === 0 ? totalQty : totalQty.toFixed(2));

          if (totalItems > 0) {
            $('#product-info-bar').css('display', '');
          }
        }

    $('#table_products').on('focusin', 'input, select', function() {
      const $row = $(this).closest('tr');
      if ($row.hasClass('template-row')) return;
      let code = ($row.find('.code-input').val() || '').trim();
      if (!code) {
        const selCode = $row.find('.name-select').data('product_code');
        if (selCode) code = String(selCode);
      }
      if (code) updateInfoBar(code);
    });

});
</script>
{% endblock %}